import React, { useState, useRef } from 'react';
// import logo from './logo.svg';
import { HashRouter as Router, Route, Link, Redirect, Switch } from 'react-router-dom';
import { Layout, Input, Menu } from 'antd';
import { createFromIconfontCN } from '@ant-design/icons';
import Discovery from './components/discovery';
import Playlists from './components/playlists';
import Songs from './components/songs';
import Mvs from './components/mvs';
import PlayListId from './components/playListId/index';
import Mv from './components/mv/index';
import { iconUrl } from './utlis/icons';
import './App.less';
const IconFont = createFromIconfontCN({
  scriptUrl: iconUrl
});

function App() {
  const { Header, Sider, Content } = Layout;
  const { Search } = Input;
  const inputEl = useRef(null);
  const [count, setCount] = useState(null);
  return <Router>
    <Layout>
      <Header className="header">
        <Search
          className="header-input"
          placeholder="搜索音乐"
          // 敲击回车或者点击搜索按钮触发事件
          onSearch={value => console.log(value)}
        // style={{ width: 200}}
        />
      </Header>
      <Layout>
        <Sider className="sider" width="180">
          <Menu theme="light" className="sider-color" mode="inline" defaultSelectedKeys={[window.location.hash.split('/')[1]]}>
            <Menu.Item key="discovery" className="center" icon={<IconFont type='iconyinle11' style={{ fontSize: '26px', color: '#08c' }} />}>
              <Link to="/discovery">发现音乐</Link>
            </Menu.Item>
            <Menu.Item key="playlists" className="center" icon={<IconFont type='iconyinle1' style={{ fontSize: '26px', color: '#08c' }} />}>
              <Link to="/playlists">推荐歌单</Link>
            </Menu.Item>
            <Menu.Item key="songs" className="center" icon={<IconFont type='iconyinle' style={{ fontSize: '26px', color: '#08c' }} />}>
              <Link to="/songs">最新音乐</Link>
            </Menu.Item>
            <Menu.Item key="mvs" className="center" icon={<IconFont type='iconbofang2' style={{ fontSize: '26px', color: '#08c' }} />}>
              <Link to="/mvs">最新MV</Link>
            </Menu.Item>
          </Menu>
        </Sider>
        <Content className="content">
          <Switch>
            {/* <Route path="/discovery" component={Discovery} lickc={()=>{console.log('ssssssssss')}}></Route> */}
            <Route path="/discovery">
              <Discovery lickc={(id) => {
                setCount(id)
                inputEl.current.play()
              }} />
            </Route>
            <Route exact path="/playlists" component={Playlists}></Route>
            <Route exact path="/playlists/:id?" component={PlayListId}>
              <PlayListId ClickChanges={(id) => {
                setCount(id)
                inputEl.current.play()
              }}></PlayListId>
            </Route>
            <Route path="/songs">
              <Songs mp3Id={(id) => {
                console.log(id)
                setCount(id)
                inputEl.current.play()
              }} />
            </Route>
            <Route path="/mvs" component={Mvs}></Route>
            <Route path="/mv/:id" component={Mv}></Route>
            <Redirect exact from="/" to="discovery"></Redirect>
          </Switch>
        </Content>
      </Layout>
      {/* <Footer>Footer</Footer> */}
      <audio src={count} ref={inputEl} controls="controls" className="audio">
        您的浏览器不支持 video 标签。
      </audio>
    </Layout>
  </Router>
}

export default App;
